<template>
  <div class="ele-body ele-body-layout">
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>微信展示分析</span>
      </div>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="url"
        :highlight-current-row="true"
        :max-height="defaultHeight"
        :parse-data="parseData"
        :selection.sync="selection"
        :summary-method="summaries"
        :where="where"
        show-summary
      >
        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <el-form
            :model="where"
            class="ele-form-search"
            label-width="60px"
            @keyup.enter.native="reload"
            @submit.native.prevent
          >
            <div class="app-container">
              <div class="filter-container">
                <el-select
                  v-model="where.platform"
                  class="filter-item"
                  clearable
                  placeholder="推广平台"
                  style="width: 140px"
                  @change="setPlatformList"
                >
                  <el-option
                    v-for="item in platformList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>

                <el-select
                  v-if="whereBazaarList.length > 0"
                  v-model="where.bazaarId"
                  class="filter-item"
                  clearable
                  placeholder="推广市场"
                  style="width: 160px"
                  @change="setBazaarList"
                >
                  <el-option
                    v-for="item in whereBazaarList"
                    :key="item.id"
                    :disabled="item.status === 0"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>

                <el-select
                  v-if="whereZoneList.length > 0"
                  v-model="where.zoneid"
                  class="filter-item"
                  clearable
                  placeholder="微信分组"
                  style="width: 140px"
                  @change="reload"
                >
                  <el-option
                    v-for="item in whereZoneList"
                    :key="item.id"
                    :disabled="item.status === 0"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>

                <el-input
                  v-model="where.nickname"
                  class="filter-item"
                  clearable
                  placeholder="微信昵称"
                  style="width: 140px"
                  @clear="reload"
                />

                <el-input
                  v-model="where.wechat"
                  class="filter-item"
                  clearable
                  placeholder="微信号"
                  style="width: 140px"
                  @clear="reload"
                />

                <el-input
                  v-model="where.name"
                  class="filter-item"
                  clearable
                  placeholder="使用员工"
                  style="width: 140px"
                  @clear="reload"
                />

                <el-date-picker
                  v-model="daterange"
                  :clearable="false"
                  :picker-options="pickerOptions"
                  end-placeholder="数据结束日期"
                  range-separator="-"
                  start-placeholder="数据开始日期"
                  style="width: 226px; margin-right: 6px"
                  type="datetimerange"
                  unlink-panels
                  value-format="yyyy-MM-dd HH:mm:ss"
                  @change="onDateRangeChoose"
                />

                <el-button
                  class="filter-item"
                  icon="el-icon-search"
                  type="primary"
                  @click="reload"
                  >搜索
                </el-button>

                <el-button
                  class="filter-item"
                  icon="el-icon-refresh"
                  style="margin-left: 2px"
                  @click="reset"
                  >重置
                </el-button>
              </div>
            </div>
          </el-form>
        </template>

        <!-- 推广平台列 -->
        <template slot="platform" slot-scope="{ row }">
          <template v-for="item in platformList">
            <span v-if="item.value === row.platform" :key="item.value">
              {{ item.label }}
            </span>
          </template>
        </template>

        <!-- 推广市场列 -->
        <template slot="bazaarId" slot-scope="{ row }">
          <template v-for="item in bazaarList">
            <span v-if="item.id === row.bazaarId" :key="item.id">
              {{ item.name }}
            </span>
          </template>
        </template>

        <!-- 推广分组列 -->
        <template slot="zoneid" slot-scope="{ row }">
          <template v-for="item in zoneList">
            <span v-if="item.id === row.zoneid" :key="item.id">
              {{ item.name }}
            </span>
          </template>
        </template>
      </ele-pro-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "serviceCount",
  data() {
    return {
      //数据合计
      total: Object,

      // 表格高度
      defaultHeight: 0,
      // 展示平台
      platformList: [
        { value: 1, label: "百度SEM竞价" },
        { value: 2, label: "百度信息流" },
        { value: 3, label: "巨量引擎" },
        { value: 4, label: "搜狗推广" },
        { value: 5, label: "卧龙推广" },
        { value: 6, label: "360点睛" },
      ],
      // 筛选日期范围
      daterange: this.getDaterange(),

      // 日期时间选择器快捷项
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 7 * (24 * 60 * 60 * 1000));
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近半月",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 15 * (24 * 60 * 60 * 1000));
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 30 * (24 * 60 * 60 * 1000));
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 90 * (24 * 60 * 60 * 1000));
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近半年",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 180 * (24 * 60 * 60 * 1000));
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一年",
            onClick(picker) {
              let start = new Date();
              start.setTime(start.getTime() - 365 * (24 * 60 * 60 * 1000));
              start =
                start.getFullYear() +
                "-" +
                (start.getMonth() + 1) +
                "-" +
                start.getDate() +
                " 00:00:00";
              let end = new Date();
              end.setTime(end.getTime());
              end =
                end.getFullYear() +
                "-" +
                (end.getMonth() + 1) +
                "-" +
                end.getDate() +
                " 00:00:00";
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },

      // 表格数据接口
      url: "/ServiceCount/read",
      // 表格列配置
      columns: [
        {
          columnKey: "index",
          type: "index",
          width: 80,
          label: "序号",
          align: "center",
          showOverflowTooltip: true,
        },
        {
          prop: "name",
          label: "使用员工",
          sortable: true,
          showOverflowTooltip: true,
        },
        {
          prop: "nickname",
          label: "微信昵称",
          sortable: true,
          showOverflowTooltip: true,
        },
        {
          prop: "wechat",
          label: "微信号",
          slot: "bazaarId",
          sortable: true,
          showOverflowTooltip: true,
        },
        {
          prop: "cost",
          label: "客服消耗成本",
          sortable: true,
          showOverflowTooltip: true,
        },
        {
          prop: "shownumber",
          label: "展示次数",
          sortable: true,
          showOverflowTooltip: true,
        },
        {
          prop: "cpcshow",
          label: "平均展示成本",
          sortable: true,
          showOverflowTooltip: true,
        },
        {
          prop: "copynumber",
          label: "复制数",
          sortable: true,
          showOverflowTooltip: true,
        },
        {
          prop: "cpccopy",
          label: "平均复制成本",
          sortable: true,
          showOverflowTooltip: true,
        },
      ],
      // 表格搜索条件
      where: {},
      // 表格选中数据
      selection: [],
      // 当前编辑数据
      current: null,
      // 市场列表
      bazaarList: [],
      // 市场列表
      tempbazaarList: [],
      // 市场列表
      whereBazaarList: [],
      // 分组列表
      zoneList: [],
      // 分组列表
      tempzoneList: [],
      // 分组列表
      whereZoneList: [],
    };
  },

  created() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },

  methods: {
    summaries(param) {
      const { columns, data } = param,
        createDiv = function (t1, t2) {
          return (() => {
            return (
              <el-col>
                <el-col class="el-table_target_sum">{t1}</el-col>
                <el-col class="el-table_target_bar"></el-col>
                <el-col class="el-table_target_total">{t2}</el-col>
              </el-col>
            );
          })();
        };
      let result = [],
        sum1 = 0,
        sum2 = 0,
        sum3 = 0,
        sum4 = 0,
        sum5 = 0;
      columns.forEach((column, index) => {
        switch (column.property) {
          case "wechat":
            result[index] = createDiv("小计", "合计");
            break;

          case "shownumber":
            sum1 = this.getcolumn(data, column.property, true);
            result[index] = createDiv(sum1, this.total.shownumber);
            break;

          case "copynumber":
            sum2 = this.getcolumn(data, column.property, true);
            result[index] = createDiv(sum2, this.total.copynumber);
            break;

          case "cost":
            sum3 = this.getcolumn(data, column.property, false);
            result[index] = createDiv(sum3, this.total.cost);
            break;

          case "cpcshow":
            sum4 = this.getcolumn(data, column.property, false);
            result[index] = createDiv(sum4, this.total.cpcshow);
            break;

          case "cpccopy":
            sum5 = this.getcolumn(data, column.property, false);
            result[index] = createDiv(sum5, this.total.cpccopy);
            break;
        }
      });
      return result;
    },

    getcolumn(data, column, integer) {
      if (data.length === 0) {
        return 0;
      }
      let sums = 0;
      const values = data.map((item) => Number(item[column]));
      if (!values.every((value) => isNaN(value))) {
        sums = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0);
      }
      if (integer) {
        return sums;
      }
      return sums.toFixed(2);
    },

    /*默认时间*/
    getDaterange() {
      let start = new Date();
      let end =
        start.getFullYear() +
        "-" +
        (start.getMonth() + 1) +
        "-" +
        start.getDate() +
        " 00:00:00";
      start.setTime(start.getTime() - 24 * 60 * 60 * 1000);
      start =
        start.getFullYear() +
        "-" +
        (start.getMonth() + 1) +
        "-" +
        start.getDate() +
        " 00:00:00";
      return [start, end];
    },

    /* 日期选择改变回调 */
    onDateRangeChoose() {
      if (this.daterange && this.daterange.length === 2) {
        this.where.createTimeStart = this.daterange[0];
        this.where.createTimeEnd = this.daterange[1];
      } else {
        this.where.createTimeStart = null;
        this.where.createTimeEnd = null;
      }
    },

    setPlatformList(obj) {
      this.whereBazaarList = [];
      this.where = Object.assign({}, this.where, {
        bazaarId: null,
      });
      for (let i = 0; i < this.bazaarList.length; i++) {
        if (this.bazaarList[i].platform === obj) {
          this.whereBazaarList.push(this.bazaarList[i]);
        }
      }
      if (this.whereBazaarList.length > 1) {
        this.whereBazaarList.sort(function (a, b) {
          return b.status - a.status;
        });
      }
      this.reload();
    },

    setBazaarList(obj) {
      this.whereZoneList = [];
      this.where = Object.assign({}, this.where, {
        zoneid: null,
      });
      for (let i = 0; i < this.zoneList.length; i++) {
        if (this.zoneList[i].bazaarId === obj) {
          this.whereZoneList.push(this.zoneList[i]);
        }
      }
      if (this.whereZoneList.length > 1) {
        this.whereZoneList.sort(function (a, b) {
          return b.status - a.status;
        });
      }
      this.reload();
    },

    parseData(res) {
      if (res.code === 0) {
        this.bazaarList = res.bazaar;
        this.zoneList = res.zone;
        this.total = res.total;
      }
      return {
        code: res.code,
        data: res.data,
        count: res.count,
        msg: res.msg,
      };
    },

    /*设置表格高度*/
    getHeight() {
      this.defaultHeight = window.innerHeight - 360;
    },

    /* 刷新表格 */
    reload(isPage) {
      let obj = { where: this.where };
      if (!isPage) {
        obj.page = 1;
      }
      this.$refs.table.reload(obj);
    },

    /* 重置搜索 */
    reset() {
      for (let key in this.where) {
        this.where[key] = null;
      }
      this.reload();
    },
  },
};
</script>
<style scoped>
.el-sex {
  vertical-align: middle;
  height: 16px;
  width: 16px;
}
</style>
